<template>
    <header>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">
                homepage
            </el-breadcrumb-item>
            <el-breadcrumb-item>送养列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="display: flex;">
            <div class="icon" @click="drawer = true">添加</div>
            <div class="icon" @click="handleSelectClose">筛选</div>
        </div>
    </header>
    <!-- 筛选 -->
    <div class="select" ref="select">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="宠物名字">
                        <el-input v-model="formInline.name" placeholder="宠物名字" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年龄">
                        <el-input v-model="formInline.age" type="number" placeholder="年龄" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性格">
                        <el-input v-model="formInline.personality" placeholder="性格" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="8">
                <el-col :span="8">
                    <el-form-item label="品种">
                        <el-input v-model="formInline.variety" placeholder="品种" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="健康情况">
                        <el-input v-model="formInline.health" placeholder="健康情况" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="领养地址">
                        <el-input v-model="formInline.address" placeholder="领养地址" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="formSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="main">
        <div class="table-container">
            <table border="1">
                <thead>
                    <tr>
                        <th>宠物名称</th>
                        <th>地址</th>
                        <th>联系电话</th>
                        <th>更新时间</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="post in pets" :key="post._id" @click="dialogTable(post._id)">
                        <td>{{ post.name }}</td>
                        <td>{{ post.address }}</td>
                        <td>{{ post.contact }}</td>
                        <td>{{ post.time }}</td>
                        <td>
                            <div class="btn">
                                <button class="one iconfont icon-xiugai" @click.stop="updatePet(post._id)"></button>
                                <button class="del iconfont icon-shanchu" @click.stop="deletePet(post._id)"></button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页 -->
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
            :page-size="8" v-model="current" />
    </div>
    <!-- 详情 -->
    <el-dialog v-model="dialogTableVisible" title="宠物详情">
        <PetsDialog :filterPet="filterPet"></PetsDialog>
    </el-dialog>
    <!-- 添加 -->
    <el-drawer v-model="drawer" title="添加送养" :direction="direction" size="50%" :before-close="handleClose">
        <AddPetLost @handleDraewr="handleDrawer"></AddPetLost>
    </el-drawer>

    <!-- 修改 -->
    <el-drawer v-model="drawer2" title="修改送养" :direction="direction" size="50%" :before-close="handleClose2">
        <AddPetLost @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet._id"></AddPetLost>
    </el-drawer>
</template>
<script setup>
import { getPetsLost, delPetLost, selectPetLost } from '@/utils/jia-axios';
import { nextTick, ref, useTemplateRef, watch } from 'vue';
import PetsDialog from '@/components/pets/PetsDialog.vue';
import AddPetLost from '@/components/pets/AddPetLost.vue';
import { ElNotification } from 'element-plus'


// 总共多少个分页
const total = ref(0)
// 会话框，展示详情
const dialogTableVisible = ref(false)
const filterPet = ref(false)
const dialogTable = (id) => {
    dialogTableVisible.value = true
    filterPet.value = pets.value.find(item => item._id == id)
    console.log(filterPet.value);
}
// 获取pets列表
const pets = ref(null)
getPetsLost().then(res => {
    pets.value = res.data.list
    total.value = res.data.total
    console.log(total.value);
})

// 添加pet
import { ElMessageBox } from 'element-plus'
const drawer = ref(false)
const drawer2 = ref(false)

const direction = ref('rtl')
const handleClose = (done) => {
    ElMessageBox.confirm('帖子还未添加，是否退出?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const handleDrawer = () => {
    drawer.value = false
    drawer2.value = false
    getPetsLost(current.value).then(res => {
        pets.value = res.data.list
        total.value = res.data.total
        console.log(total.value);
    })
}

// 修改pet
const handleClose2 = (done) => {
    ElMessageBox.confirm('帖子还未修改，是否退出?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const updatePet = (id) => {
    drawer2.value = true
    filterPet.value = pets.value.find(item => item._id == id)
    // console.log(filterPet.value);
}

// 删除
const deletePet = async (id) => {
    await delPetLost(id)
    getPetsLost().then(res => {
        pets.value = res.data.list
        total.value = res.data.total
        // console.log(total.value);
        ElNotification({
            title: '删除成功',
            message: `成功删除一条数据`,
            type: 'success',
        })
    })
}

// 分页
const current = ref(1)
const handleCurrentChange = (newPage) => {
    current.value = newPage;
}
watch(current, (newValue, oldValue) => {
    if (newValue != oldValue) {
        formSubmit(newValue)
    }
});

// 筛选
const select = useTemplateRef('select')
const flag = ref(false)
const handleSelectClose = () => {
    flag.value = !flag.value
    if (flag.value) {
        select.value.style.height = "183rem"
        select.value.style.visibility = "inherit"
        select.value.style.opacity = "1"
    } else {
        select.value.style.height = "0"
        select.value.style.visibility = "hidden"
        select.value.style.opacity = "0"
    }
}

const formInline = ref({
    name: '',
    variety: '',
    age: '',
    personality: '',
    health: '',
    address: '',
})

const formSubmit = (page) => {
    const { name, variety, age, personality, health, address } = formInline.value
    selectPetLost(name, variety, age, personality, health, address, page).then(res => {
        pets.value = res.data.list
        // console.log(res.data);
        total.value = res.data.total
        ElNotification({
            title: '查询成功',
            message: `查询到 ${pets.value.length} 条数据`,
            type: 'success',
        })
    })
}

</script>
<style lang="less" scoped>
@import url(../../css/icon.css);

header {
    padding: 10rem 30rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
        padding: 5rem 10rem;
        background-color: #409eff;
        color: #fff;
        border-radius: 4rem;
        margin-left: 8rem;
        font-size: 12rem;
    }
}

.select {
    height: 0;
    visibility: hidden;
    opacity: 0;
    margin: 8rem 20rem;
    padding: 0 20rem;
    background-color: #fff;
    border-radius: 10rem;
    transition: all 1s;
}

.main {
    z-index: 99;
    @theme-color: #f8f9fa;

    .table-container {
        margin: 20rem;
        font-family: 'Arial', sans-serif;
    }

    h2 {
        color: @theme-color;
        font-size: 24rem;
        margin-bottom: 18rem;
        display: flex;
        justify-content: space-between;

        .add {
            font-size: 20rem;

            button {
                padding: 6rem 12rem;
                border: none;
                cursor: pointer;
                border-radius: 4rem;
                font-size: 18rem;
                transition: background-color 0.3s;
                background-color: #409eff;
                color: white;
            }
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10rem;
        background-color: #fff;
        box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.05);
        border-radius: 8rem;
        overflow: hidden;
    }

    th,
    td {
        padding: 6rem 15rem;
        font-size: 14rem;
        text-align: left;
        border: 1rem solid #e0e0e0;
    }

    .btntd {
        padding: 6rem 0;

    }

    th {
        background-color: @theme-color;
        color: #9c9c9c;
        font-weight: 600;
        font-size: 14rem;
    }

    tbody tr:nth-child(even) {
        background-color: #f7f7f7;
    }

    tbody tr:hover {
        background-color: #f1f1f1;
    }

    tbody {
        .btn {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-evenly;

            .del {
                background-color: #ff4d4f;
                color: white;
            }

            .one {
                // background-color: #16ceaf;
                color: rgb(0, 0, 0);
            }
        }
    }

    button {
        padding: 6rem 10rem;
        border: none;
        cursor: pointer;
        border-radius: 4rem;
        font-size: 12rem;
        transition: background-color 0.3s;
    }

    .edit-btn {
        background-color: @theme-color;
        color: #fff;
        margin-right: 8rem;

        &:hover {
            background-color: darken(@theme-color, 10%);
        }
    }

    .delete-btn {
        background-color: #ff4d4f;
        color: #fff;

        &:hover {
            background-color: darken(#ff4d4f, 10%);
        }
    }
}

.pagination {
    width: 96%;
    display: flex;
    padding: 0 20rem;
    justify-content: end;
}

.el-form--inline .el-form-item {
    width: 100%;
}

.el-button,
.el-button.is-round {
    margin: auto;
    padding: 0 26rem;
}

.el-form {
    padding-top: 15rem;
}
</style>